<template>
  <!-- 头部搜索框 -->
  <el-form :model="queryForm" :inline="true">
    <el-form-item label="角色名" >
      <el-input v-model="queryForm.roleName" />
    </el-form-item>
    <el-form-item label="菜单名称">
      <el-input v-model="queryForm.menuName" />
    </el-form-item>
    <el-form-item label="权限">
      <el-input v-model="queryForm.perms" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="handleRest">重置</el-button>
    </el-form-item>
    <el-form-item style="margin-left: 125px">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="danger" @click="handleRemove(0)">删除</el-button>
    </el-form-item>
  </el-form>
  <!-- 列表 -->
  <el-table :data="tableData" style="width: 98%" row-key="id" default-expand-all @selection-change="handleSelectionChange" height="600px">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="55" />
    <el-table-column prop="roleId" label="角色ID" width="100" />
    <el-table-column prop="roleLabel" label="角色标识" width="150" />
    <el-table-column prop="roleName" label="角色名称" width="150" />
    <el-table-column prop="menuName" label="菜单名称" width="150" />
    <el-table-column prop="path" label="组件路径" width="250" />
    <el-table-column prop="perms" label="权限" width="150" />
    <el-table-column prop="sort" label="排序" width="150" />
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button link type="danger" size="small" @click="handleRemove(scope.row.id)">解除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination_container">
    <el-pagination v-model:current-page="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
                   :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

  <el-dialog v-model="menuFormShow" :title="menuTitle" width="50%" :before-close="handleClose">
    <el-row>
      <el-col :span="12">
        <el-form-item label="角色ID" prop="userRole.userId">
          <el-input v-model="roleMenu.roleId" placeholder="请输入角色ID"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label=''>
          <el-select v-model="roleMenu.menuId" placeholder="菜单" style="width: 200px">
            <el-option
                v-for="item in menus"
                :key="item.id"
                :label="item.menuName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
            </span>
    </template>
  </el-dialog>
</template>

<script setup>

import {onMounted, ref} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

let total = ref(0);
const tableData = ref([
])

let menuFormShow = ref(false);
let menuTitle = ref("");

let selectIds = ref([])

let menus = ref([]
)

let roleMenu = ref({
  roleId : undefined,
  menuId : undefined
})

let queryForm = ref({
  roleName: undefined,
  menuName : undefined,
  perms : undefined,
  pageNum: 1,
  pageSize: 10
})

onMounted(() => {
  getRoleMenuList()
});
const getRoleMenuList = () => {

  request.get(`/roleMenu/list`)
      .then(response => {
        tableData.value =response.data.data.list;
        total.value = response.data.data.total;
      })
}


// 重置
const handleRest = () => {
  const params = {
    roleName: undefined,
    menuName : undefined,
    perms : undefined,
    pageNum : queryForm.value.pageNum,
    pageSize : queryForm.value.pageSize
  }
  request.get(`/roleMenu/list`, {params})
      .then(res => {
        if(res.data.code === 200) {
          // 获取数据
          tableData.value = res.data.data.list;
          total.value = res.data.data.total;
        }
      })
}
// 搜索
const handleQuery = () => {
  const params = {
    roleName: queryForm.value.roleName,
    menuName : queryForm.value.menuName,
    perms : queryForm.value.perms,
    pageNum : queryForm.value.pageNum,
    pageSize : queryForm.value.pageSize
  }
  request.get(`/roleMenu/list`, {params})
      .then(res => {
        if(res.data.code === 200) {
          // 获取数据
          tableData.value = res.data.data.list;
          total.value = res.data.data.total;
          // 清空搜索框
          // queryForm.value = {}
        }
      })
}


const handleSizeChange = (sizeNumber) => {
  const params = {
    roleName: queryForm.value.roleName,
    menuName : queryForm.value.menuName,
    perms : queryForm.value.perms,
    pageNum : queryForm.value.pageNum,
    pageSize : sizeNumber
  }
  request.get(`/roleMenu/list`, {params})
      .then(res => {
        if(res.data.code === 200) {
          // 获取数据
          tableData.value = res.data.data.list;
          total.value = res.data.data.total;
        }
      })
}
// 点击下一页，上一页
const handleCurrentChange = (pageNumber) => {
  const params = {
    roleName: queryForm.value.roleName,
    menuName : queryForm.value.menuName,
    perms : queryForm.value.perms,
    pageNum : pageNumber,
    pageSize : queryForm.value.pageSize
  }
  request.get(`/roleMenu/list`, {params})
      .then(res => {
        if(res.data.code === 200) {
          // 获取数据
          tableData.value = res.data.data.list;
          total.value = res.data.data.total;
        }
      })
}

// 多选变化
const handleSelectionChange = (selection) => {
  let ids = selection.map(item => item.id)
  selectIds.value = ids;
}

const handleRemove = (id) => {
  // 走删除接口
  let ids = undefined;
  if(id > 0) {
    ids = [id]
  }else {
    ids = selectIds.value;
  }
  // id其实是点击操作下的删除按钮时才会有数据
  ElMessageBox.confirm(
      `确定要删除{${ids}}数据吗?`,
      '解绑用户角色',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(() => {
        request.delete(`/roleMenu/delete?ids=${ids}`)
            .then(res => {
              if(res.data.code === 200) {
                ElMessage({
                  message: '删除成功',
                  type: 'success',
                })
                // 刷新列表
                getRoleMenuList();
              }
            })
      })
      .catch(() => {
      })
}

// 新增按钮，弹出表单
const handleAdd = () => {
  menuFormShow.value = true;
  menuTitle.value = "分配权限";
  allMenus()
}

const allMenus = () => {
  request.get(`/roleMenu/allMenu`)
      .then(res => {
        if(res.data.code === 200){
          menus.value = res.data.data
        }
        console.log("=========>",menus.value)
      }).catch(() => {})
}

// 提交表单,分配角色
const handleSubmit = () => {
  request.post(`/roleMenu/add`, roleMenu.value)
      .then(res => {
        if(res.data.code === 200) {
          // 关闭窗口
          menuFormShow.value = false;
          // 刷新列表
          getRoleMenuList();
          // 弹窗提示新增成功
          ElMessage({
            message: '分配角色成功！',
            type: 'success',
          })
        }
      })
}

// 关闭弹窗
const handleClose = () => {
  menuFormShow.value = false;
  form.value = {}
}

// 取消提交
const handleCancel = () =>{
  menuFormShow.value = false;
  form.value = {}
}

</script>

<style lang="scss" scoped>
.pagination_container {
  position: relative;
  height: 40px;
  margin-top: 15px;

}

.el-pagination {
  position: absolute;
  right: 110px;
}
</style>